﻿@page "/Login"
@using HuilianMedical.Backend.Models
@using HuiLianMedical.Share
@using HuiLianMedical.Share.Data
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.Authorization
@inject IMessageService _message
@inject IDbContextFactory<MedicalContext> DbFactory
@inject AuthenticationStateProvider authStateProvider
@inject NavigationManager navigation

<PageTitle>登录到您的iMember - 西建大iOS Club</PageTitle>

<GridRow Type="flex" Justify="center" Style="height: 80vh;">
    <GridCol Xs="24" Sm="24" Md="24" Lg="24" Xl="12" Xxl="12">
        <Card Class="login-form" Bordered="false">
            <Title Level="2" Style="text-align: center">登录</Title>
            <Form Model="Model"
                  OnFinish="Submit"
                  OnFinishFailed="OnFinishFailed">
                <FormItem Class="item">
                    <div class="input-box">
                        <input @bind="@context.Phone" required=""/>
                        <label>手机号</label>
                    </div>
                </FormItem>
                <FormItem Class="item">
                    <div class="input-box">
                        <input @bind="@context.Password" required=""/>
                        <label>密码</label>
                    </div>
                </FormItem>
                <FormItem Class="item" Style="text-align: center">
                    <Button Style="border-radius: 4px;" Type="@ButtonType.Primary" HtmlType="submit">提交</Button>
                </FormItem>
                <FormItem Class="item">
                    <Paragraph class="Submit" Style="text-align: center">
                        没有账号？去
                        <NavLink href="Signup" Match="NavLinkMatch.All">注册</NavLink>
                        一个
                    </Paragraph>
                </FormItem>
            </Form>
        </Card>
    </GridCol>
</GridRow>

@code {
    public LoginModel Model { get; } = new();

    private async Task Submit()
    {
        if (string.IsNullOrEmpty(Model.Phone) || string.IsNullOrEmpty(Model.Password))
        {
            await _message.Info("没数据!");
            return;
        }

        await using var context = await DbFactory.CreateDbContextAsync();

        var user = await context.Users.FirstOrDefaultAsync(x => x.Phone == Model.Phone && x.Password == Model.Password);
        
        if (user is null)
        {
            await _message.Error("用户名或密码错误!");
            return;
        }
            
        var provider = (Provider)authStateProvider;
        await provider.UpdateAuthState(user);

        await _message.Info("登陆成功!");
        navigation.NavigateTo("/", true);
    }

    private void OnFinishFailed()
    {
        _message.Error("出错了!");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var authState = await authStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;

            if (user.Identity is not null && user.Identity.IsAuthenticated)
            {
                navigation.NavigateTo("/");
            }
        }

        await base.OnAfterRenderAsync(firstRender);
    }

}

<style>
    .login-form {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 10px #c8c8c8;
        margin-top: 30px;
        margin-bottom: 30px;
        max-width: 100vw
    }

    @@media screen and (max-width: 768px) {
        .login-form{
            box-shadow: none;
            margin : 0;
        }
    }

    .input-box input {
        color: #1c1f23;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        letter-spacing: 1px;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #ededed;
        outline: none;
        background: transparent;
    }

    .input-box label {
        color: #1c1f23;
        padding: 10px;
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: .5s;
    }

    .input-box input:focus ~ label,
    .input-box input:valid ~ label {
        top: -18px;
        left: 0;
        color: #3c3c43;
        font-size: 12px;
    }
</style>